<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜</title>
	<style type="text/css">
		.small {margin: 0 10px;border: 1px solid #fff;}
		.small:hover {border-color: #000;}
		#filter{width:200px;height: 200px;background: #fff;opacity: 0.4;position: absolute;left: 0;top: 0;}
		#middle{position: relative;width: 400px;height: 400px;}
		#max{width: 400px;height: 400px;position: absolute;left: 450px;top: 0;border: 1px solid #ccc;overflow: hidden;}
		#max img{width: 800px;height: 800px;position: absolute;left: 0;top: 0;}
	</style>
</head>
<body>
	<div id="middle">
		<img src="imgs/1-large.jpg" class="middlePic" width="400" height="400">
		<div id="filter"></div>
	</div>
	<div id="max">
		<img src="imgs/1-large.jpg" id="maxPic">
	</div>
	<div>
		<img src="imgs/1-small.jpg" class="small"  data-url="imgs/1-large.jpg">
		<img src="imgs/2-small.jpg" class="small"  data-url="imgs/2-large.jpg">
		<img src="imgs/3-small.jpg" class="small"  data-url="imgs/3-large.jpg">
		<img src="imgs/4-small.jpg" class="small"  data-url="imgs/4-large.jpg">
		<img src="imgs/5-small.jpg" class="small"  data-url="imgs/5-large.jpg">
	</div>
</body>
</html>
<script>
window.onload = function(){
	var oMiddlePic = document.querySelector(".middlePic");
	var aSmall = document.querySelectorAll(".small");
	var oMiddle = document.getElementById("middle");
	var oFilter = document.getElementById("filter")
	var img = document.getElementById("maxPic");
	for(var i=0;i<aSmall.length;i++){
		aSmall[i].num = i;
		aSmall[i].onmouseover = function(){
			var url	= this.getAttribute("data-url");
			oMiddlePic.src = url;
			img.src = url;
		}
	}
	
	oMiddle.onmousemove = function(e){
		var e = e||event;
		var x = e.clientX-oMiddle.offsetLeft-oFilter.offsetWidth/2;
		var y = e.clientY-oMiddle.offsetTop-oFilter.offsetHeight/2; 
		if(x<0){
			x=0;
		}	
		if(x>oMiddle.offsetWidth-oFilter.offsetWidth){
			x = oMiddle.offsetWidth-oFilter.offsetWidth;
		}
		if(y<0){
			y = 0;
		}
		if(y>oMiddle.offsetHeight-oFilter.offsetHeight){
			y = oMiddle.offsetHeight-oFilter.offsetHeight;
		}
		oFilter.style.left = x+'px';
		oFilter.style.top = y+'px';
		img.style.left = -x*2+'px';
		img.style.top = -y*2+'px';
	}
}
</script>